<template>
  <div class="industry-detail" v-loading="loading">
    <template v-if="!isAddOrEdit">
      <div class="industry-header">
        <ComNav :list="['行业报告', '行业详情']" />
        <div class="edit-btn" @click="toEdit">编辑</div>
        <div :style="`width: 386px; height: 200px; background: url(${reportDetail.coverImage}) no-repeat center; background-size: cover`"></div>
        <p class="detail-title">{{reportDetail.reportTitle}}</p>
        <div class="detail-types">
          <span v-for="(sItem, index) of getLabels(reportDetail.reportLabels)" :key="index">{{sItem}}</span>
        </div>
        <p class="detail-time">发布时间：{{reportDetail.reportDate}}</p>
      </div>
      <div class="detail-main">
        <el-scrollbar>
          <p class="title">报告正文</p>
          <div class="bg" v-html="reportDetail.reportContent" v-if="reportDetail.isOriginal === 'Y'"></div>
          <div class="file" v-for="(item, index) of reportAnnexData" :key="index">
            <div>{{item}}</div>
            <el-tooltip placement="top" content="预览">
              <img src="@/assets/see.png" @click="previewItem(item)" alt="" />
            </el-tooltip>
          </div>
        </el-scrollbar>
      </div>
    </template>

    <AddOrEdit :reportDetail="reportDetail" @update="updateItem" v-else />

    <el-dialog v-model="dialogVisible" title="预览" width="1200px" append-to-body>
      <iframe :src="fileUrl" class="pdf-box" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import ComNav from '../../components/comNav/index.vue'
import {useRoute} from "vue-router";
import {getReport} from "@/api/industryReport";
import AddOrEdit from "./addOrEdit.vue";
import {reportLabelsList} from "@/api/reportLabels";

const route = useRoute();
const reportDetail = ref<Record<string, any>>({
  id: '',
  reportTitle: '',
  reportLabels: '',
  reportDate: '',
  reportContent: '',
  reportAnnex: '',
  coverImage: '',
  isOriginal: ''
});
const isAddOrEdit = ref(false);
const loading = ref(false);
const reportLabelsData = ref<{id: string, labels: string}[]>([]);
const reportAnnexData = ref<string[]>([]);
const dialogVisible = ref(false);
const fileUrl = ref('');

function toEdit() {
  isAddOrEdit.value = true;
}

function updateItem() {
  isAddOrEdit.value = false;
  getDetail();
}

function previewItem(file: string) {
  if (!file.includes('.pdf')) return window.open(file);
  fileUrl.value = file;
  dialogVisible.value = true;
}

function getLabels(labels: string) {
  const arr = labels.split(',');
  const _labels: string[] = [];
  reportLabelsData.value.forEach((item) => {
    if (arr.includes(item.id)) _labels.push(item.labels)
  })
  return _labels;
}

function getDetail() {
  if (!route.query.id) return isAddOrEdit.value = true;
  loading.value = true;
  getReport(route.query.id as string).then((res) => {
    reportDetail.value = res.data;
    reportAnnexData.value = res.data.reportAnnex ? res.data.reportAnnex.split(',') : [];
  }).finally(() => loading.value = false)
}

function getReportLabelsData() {
  reportLabelsList('').then((res: any) => {
    reportLabelsData.value = res.rows || [];
  })
}

getReportLabelsData()
getDetail()

defineComponent({name: 'IndustryDetail'})
</script>

<style scoped lang="scss">
.industry-detail {
  width: 100%;
  height: 100%;

  .industry-header {
    position: relative;
    margin-bottom: 10px;
    padding: 20px 15px;
    background-color: #fff;

    .edit-btn {
      position: absolute;
      top: 70px;
      right: 20px;
      width: 112px;
      height: 46px;
      padding-left: 50px;
      color: #FF4350;
      line-height: 44px;
      font-size: 16px;
      border: 1px solid #FF4350;
      border-radius: 10px;
      cursor: pointer;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 24px;
        transform: translateY(-50%);
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url('@/assets/edit.png');
      }
    }

    .detail-title {
      width: calc(100% - 140px);
      margin-top: 27px;
      margin-bottom: 12px;
      font-weight: 700;
      font-size: 34px;
      color: #2E3244;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .detail-types {
      display: flex;

      span {
        display: inline-block;
        margin-right: 6px;
        padding: 4px 6px;
        font-size: 14px;
        color: #92A4FA;
        background: #F3F5FF;
        border-radius: 10px;
      }
    }

    .detail-time {
      margin-top: 30px;
      font-size: 14px;
      color: #2E3244;
    }
  }

  .visit-person {
    padding: 20px 30px;
    background-color: #fff;

    p {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 20px;
      color: #2E3244;
    }

    .person-box {
      display: flex;
      align-items: center;

      .person-main {
        width: calc(100% - 60px);
        display: flex;

        .item {
          box-sizing: border-box;
          margin-right: 15px;
          padding: 6px 10px;
          height: 42px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 21px;
          background: #F3F5FF;

          .name {
            margin-left: 10px;
          }
        }
      }

      .expand-btn {
        flex: 1;
        color: #999;
        cursor: pointer;

        .btn-icon {
          display: inline-block;
          width: 6px;
          height: 10px;
          margin-left: 6px;
          background: url('./assets/ss.png');
        }
      }
    }
  }

  .detail-main {
    width: 100%;
    height: calc(100% - 450px);
    margin-top: 10px;
    padding: 20px;
    background-color: #fff;

    .title {
      font-weight: 700;
      font-size: 20px;
      color: #2E3244;
    }

    .text {
      margin: 15px 0 30px 0;
      font-size: 14px;
      color: #666;
    }

    .bg {
      width: 100%;
      //height: 300px;
      margin-top: 30px;
      //background: url('./assets/bg.png') no-repeat;
      background-size: cover;
    }

    .file {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;

      img {
        width: 16px;
        height: 12px;
        cursor: pointer;
      }
    }
  }
}

.pdf-box {
  width: 100%;
  height: 650px;
}
</style>
